<!DOCTYPE html>
<html>
<head>
	<!-- Required meta tags-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- Color theme for statusbar -->
	<meta name="theme-color" content="#2196f3">
	<title>Sortable List</title>
	<link href="https://cdn.bootcss.com/framework7/2.3.1/css/framework7.min.css" rel="stylesheet" />
	<link href="css/icon-f7.css" rel="stylesheet" />
</head>
<body>
<!-- App root element -->
<div id="app">
	<!-- Statusbar overlay -->
	<div class="statusbar"></div>
	<!-- Your main view, should have "view-main" class -->
	<div class="view view-main">
		<!-- Initial Page, "data-name" contains page name -->
		<div class="page">
			<div class="navbar">
				<div class="navbar-inner">
					<div class="left"></div>
					<div class="title">Sortable</div>
					<div class="right">
						<!-- Link to toggle sortable -->
						<a class="link sortable-toggle" data-sortable=".sortable">Toggle</a>
					</div>
				</div>
			</div>
			<div class="page-content">
				<div class="list sortable">
					<ul>
						<li>
							<div class="item-content">
								<div class="item-media"><i class="icon icon-f7"></i></div>
								<div class="item-inner">
									<div class="item-title">1 Jenna Smith</div>
									<div class="item-after">CEO</div>
								</div>
							</div>
							<div class="sortable-handler"></div>
						</li>
						<li>
							<div class="item-content">
								<div class="item-media"><i class="icon icon-f7"></i></div>
								<div class="item-inner">
									<div class="item-title">2 John Doe</div>
									<div class="item-after">Director</div>
								</div>
							</div>
							<div class="sortable-handler"></div>
						</li>
					</ul>
				</div>
				<div class="list media-list sortable">
					<ul>
						<li>
							<div class="item-content">
								<div class="item-media"><img src="http://lorempixel.com/160/160/people/1" width="80"/></div>
								<div class="item-inner">
									<div class="item-title-row">
										<div class="item-title">Yellow Submarine</div>
										<div class="item-after">$15</div>
									</div>
									<div class="item-subtitle">Beatles</div>
									<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
								</div>
							</div>
							<div class="sortable-handler"></div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="https://cdn.bootcss.com/framework7/2.3.1/js/framework7.min.js"></script>
<script type="text/javascript" src="js/sortable-list.js"></script>
</body>
</html>